<script setup lang='ts'>
    import { defineAsyncComponent,reactive,ref,toRefs } from 'vue';
    import { toRaw } from "@vue/reactivity";
    import { Key } from '@/stores/auth';
    import request from "@/utils/request";
    import {notify} from '@/utils/element';
    import { isAuth } from '@/utils/utils'
    import { ElLoading } from 'element-plus'
    const AddEdit=defineAsyncComponent(()=>import('@/views/jiankangdangan/detail.vue'));
    const state=reactive({
        dataList: [],
        searchForm:{
            biaoti:'',

        },
      page:{
            current:1,
            size:10,
            total:0
        },
        showFlag:true,
    })

    const ragRef=ref();
    const ragRefInstance=ref();
    const {dataList,searchForm,page,showFlag
            } = {...toRefs(state)};

    getDataList()  
    const editRef=ref();
    function add(){
        editRef.value.open('新增','add');
    }
    function getDataList(){

        ragRefInstance.value = ElLoading.service({
            target: ragRef.value,
            body: true,
            text: 'Loading...',
        })
        const params={
            page: state.page.current,
            limit: state.page.size,
        }


        if (state.searchForm.guominshi != '' && state.searchForm.guominshi != undefined) {
                    params['guominshi'] = '%' + state.searchForm.guominshi + '%'
        }
         if (state.searchForm.jibingshi != '' && state.searchForm.jibingshi != undefined) {
                    params['jibingshi'] = '%' + state.searchForm.jibingshi + '%'
        }
        if (state.searchForm.zhanghao != '' && state.searchForm.zhanghao != undefined) {
                    params['zhanghao'] = '%' + state.searchForm.zhanghao + '%'
        }
        if (state.searchForm.xingming != '' && state.searchForm.xingming != undefined) {
                    params['xingming'] = '%' + state.searchForm.xingming + '%'
        }
        if (state.searchForm.xingbie != '' && state.searchForm.xingbie != undefined) {
                    params['xingbie'] = '%' + state.searchForm.xingbie + '%'
        }
        request({
            url:'jiankangdangan/list',
            method:'get',
            params
        }).then((data)=>{
            ragRefInstance.value.close()
        state.page.total=data.data.total;
        state.dataList=data.data.list;

    })
    }
    function handleQuery(){
        getDataList()
    }
</script>

<template ref="ragRefInstance">
    <div>
    <div class="title">
        <!-- 文字 -->
        <h3>健康档案</h3>
    </div>




    <div class="text news" >


        <el-form inline :model="searchForm" label-suffix=":">
             <el-form-item label="过敏史"  prop="guominshi">
                <el-input v-model="searchForm.guominshi" maxlength="100" placeholder="请输入标题" clearable style="width: 200px;"/>
            </el-form-item>
             <el-form-item label="疾病史"  prop="jibingshi">
                <el-input v-model="searchForm.jibingshi" maxlength="100" placeholder="请输入标题" clearable style="width: 200px;"/>
            </el-form-item>
            <el-form-item label="账号"  prop="zhanghao">
                <el-input v-model="searchForm.zhanghao" maxlength="100" placeholder="请输入标题" clearable style="width: 200px;"/>
            </el-form-item>
            <el-form-item label="姓名"  prop="xingming">
                <el-input v-model="searchForm.xingming" maxlength="100" placeholder="请输入标题" clearable style="width: 200px;"/>
            </el-form-item>
                <el-form-item label="性别"  prop="xingbie">
                <el-input v-model="searchForm.xingbie" maxlength="100" placeholder="请输入标题" clearable style="width: 200px;"/>
            </el-form-item>
                <el-form-item >
                <el-button icon="ele-Search" @click="handleQuery()" style="width: 60px;" type="primary">查询</el-button>
                <el-button icon="ele-Search" @click="add()" style="width: 60px;" type="primary">新建</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="text news" ref="ragRef">
        <!-- 列表 -->
         <el-table :data="dataList">
            <el-table-column label="过敏史" prop="guominshi" />
            <el-table-column label="疾病史" prop="jibingshi" />
            <el-table-column label="账号" prop="zhanghao" />
            <el-table-column label="姓名" prop="xingming" />
            <el-table-column label="性别" prop="xingbie" />
            <el-table-column label="年龄" prop="nianling" />
            <el-table-column label="创建时间" prop="addtime" />
         </el-table>
    </div>
        <m-page :page="page" style="text-align: center; " @pageChange="getDataList"/>
        <AddEdit ref="editRef" @refresh="getDataList"/>
    </div>

    <Detail ref="DetailRef" @refresh="getback"></Detail>
</template>

<style  scoped>
    @import '@/assets/news.css';
    .el-row.is-justify-end {
        justify-content: center;
    }

</style>
